<template>
  <div class="border-line card">
    <header-title title="小区房源总数" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <div class="counts">
        <div class="count">
          <div class="count-item">
            <div class="label">本年新增数据总量</div>
            <div>
              <span class="num">{{ statisticsData.JNXZFY }}</span>
              <span class="unit">条</span>
            </div>
          </div>
          <div class="count-item">
            <div class="label">昨日新增数据数量</div>
            <div>
              <span class="num">{{ statisticsData.ZRXZFY }}</span>
              <span class="unit">条</span>
            </div>
          </div>
        </div>
      </div>
      <div class="table">
        <div class="header">
          <div class="col">小区</div>
          <div class="col">时间</div>
          <div class="col">房源数</div>
        </div>
        <vue-seamless-scroll :data="statisticsData.xqfylist" :class-option="classOption" class="scroll-warp">
          <ul class="item">
            <li v-for="(item, index) in statisticsData.xqfylist" :key="index">
              <ellipsis tooltip class="col" :length="12">{{ item.XQMC }}</ellipsis>
              <span class="col">{{ item.ZHTJSJ | moment('YYYY-MM-DD') }}</span>
              <span class="col text-error">{{ item.ZTS }}套</span>
            </li>
          </ul>
        </vue-seamless-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
// import vueSeamlessScroll from 'vue-seamless-scroll'
// import { getXQFYTJ } from '@/api/datacharts'
import { Ellipsis } from '@/components'
export default {
  components: {
    headerTitle,
    // vueSeamlessScroll,
    Ellipsis
  },
  data () {
    return {
      classOption: {
        singleHeight: 40,
        hoverStop: true,
        autoPlay: true,
        limitMoveNum: 4
      },
      statisticsData: {
        JNXZFY: 0,
        ZRXZFY: 0,
        xqfylist: []
      }
    }
  },
  created () {
    // this.fetchData()
  },
  methods: {
    fetchData () {
      // getXQFYTJ().then(res => {
      //   this.statisticsData = res[0]
      // })
    },
    handleFullScreen () {
      this.$emit('fullScreen')
    }
  }
}
</script>
<style lang="less" scoped>
.card {
  height: 368px;
  width: 100%;
  .count {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    &-item {
      flex: 1;
      border-left: 4px solid #07d6de;
      font-size: 16px;
      padding-left: 10px;

      .num {
        font-size: 24px;
        color: #ffc600;
      }
      .unit {
        color: #64d1e4;
        margin-left: 10px;
        font-size: 14px;
      }
    }
  }
  .table {
    margin-top: 20px;
    .col {
      flex: 2;
      height: 40px;
      line-height: 40px;
      padding: 0 18px;
    }
    .col:nth-child(1) {
      flex: 2;
      max-width: 220px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .col:nth-child(3) {
      flex: 1;
      text-align: right;
    }
    .header {
      opacity: 0.5;
      box-sizing: border-box;
      background: #0f3560;
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      padding: 0 18px;
      color: #fff;
      display: flex;
      justify-content: space-between;
      .col:nth-child(3) {
        color: #ffc600;
      }
    }

    .scroll-warp {
      height: 160px;
      width: 100%;
      overflow: hidden;
      ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
        li {
          box-sizing: border-box;
          height: 40px;
          line-height: 40px;
          padding: 0 18px;
          color: #61a8ff;
          position: relative;
          font-size: 14px;
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
  &-content {
    margin-top: 20px;
  }
}
</style>
